$o-wevent-event-title-sizes-variants: (
    tiny: (
        title: $display4-size*0.6,
        subtitle: $lead-font-size
    ),
    small: (
        title: $display4-size*0.75,
        subtitle: $lead-font-size
    ),
    big: (
        title: $display3-size,
        subtitle: $lead-font-size*1.25
    ),
    huge: (
        title: $display2-size,
        subtitle: $lead-font-size*1.5
    ),
    hero: (
        title: $display1-size,
        subtitle: $lead-font-size*1.75
    )
) !default;

.o_wevent_event_searchbar_form {
    flex: 0 0 100%;

    @include media-breakpoint-up(lg) {
       flex: 0 0 33%;
    }
}

.o_wevent_index_topbar_filters {
    .dropdown-toggle {
        border: $border-width solid gray('400');
        @include o-bg-color(gray('white'), $with-muted: false);
        @include border-radius($dropdown-border-radius);
        @include hover-focus {
            border-color: theme-color('primary');
            color: theme-color('primary');
            text-decoration: none;
        }
        &:after {
            margin-left: 1.2em;
        }
        .fa {
            margin-right: .4em;
            color: theme-color('primary');
        }
    }
    .dropdown-menu {
        margin-top: $navbar-padding-y;
        min-width: 12rem;
    }
    .dropdown-item  {
        &.active .badge { // Invert badge display when the item is active
            background-color: color-yiq(theme-color('primary'));
            color: theme-color('primary');
        }
    }
}

.o_wevent_social_link {
    $o_link_size: 3em;
    display: inline-block;
    @include size($o_link_size);
    margin: 0 ($spacer * .25) ($spacer * .5) ($spacer * .25);
    line-height: $o_link_size;
    background-color: gray('100');
    border: $border-width solid $border-color;
    border-radius: 50%;
    text-align: center;
    @include hover-focus {
        background-color: gray('300');
    }
}

.o_wevent_badge {
    padding: ($spacer * .5) $spacer;
    border-radius: 10rem;
    font-weight: $font-weight-normal;
}

// Index
.o_wevent_index {
    // Events List
    .o_wevent_events_list {
        header {
            a {
                transition: all .25s ease-in-out;
                @include hover-focus {
                    transform: scale(1.05);
                }
            }
        }
        &.opt_event_list_cards_bg {
            @if (color('body') == $o-portal-default-body-bg) {
                @extend .bg-200;
            }
        }
        .opt_events_list_columns {
            header {
                height: 200px;
            }
        }
        .opt_events_list_rows {
            @include media-breakpoint-down(sm) {
                header {
                    height: 200px;
                }
            }
        }
        .o_wevent_badge_event {
            @include o-position-absolute($top: 0, $left: 0);
            @include border-left-radius(0);
            padding: ($spacer * .5) $card-spacer-x;
            transform: translateY(-50%);
        }
        .o_wevent_event_date {
            top: $card-spacer-x;
            right: $card-spacer-x;
            display: flex;
            flex-direction: column;
            justify-content: center;
            @include size(4rem);
            border-radius: 50%;
            text-align: center;

            .o_wevent_event_day {
                font-size: 1.125rem;
                font-weight: 300;
                line-height: 1;
            }
            .o_wevent_event_month {
                font-size: 0.75rem;
                font-weight: $font-weight-bold;
                text-transform: uppercase;
            }
        }
        .o_wevent_participating,
        .o_wevent_unpublished {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: $card-spacer-y $card-spacer-x;
            text-align: right;
        }
        .card-title {
            color: $body-color;
        }
    }
    .o_wevent_sidebar_title {
        margin: 0 0 ($spacer * 1.5) 0;
        border-bottom: $border-width solid $border-color;
        padding: 0 0 ($spacer * .5) 0;
        font-weight: $font-weight-bold;
        text-transform: uppercase;
    }
    .o_wevent_sidebar_block {
        margin: 0 0 ($spacer * 2.5) 0;
    }
    .o_wevent_sidebar_figure {
        position: relative;

        .figure-img {
            margin-bottom: 0;
        }
        .figure-caption {
            @include o-position-absolute($left: 0, $bottom: 0);
            width: 100%;
            padding: $spacer;
            background-color: rgba($color: #000, $alpha: 0.5);
            @include border-bottom-radius($border-radius);
            color: #fff;
        }
    }
    #o_wevent_index_main_col .form-inline {
        width: 100%;
    }
}

.o_wevent_event {
    .o_wevent_event_title {
        margin: 3rem 0;

        .o_wevent_event_name {
            font-weight: $display4-weight;
            line-height: $display-line-height;
            @include font-size($display4-size);
        }
        .o_wevent_event_subtitle {
            font-weight: $lead-font-weight;
            @include font-size($lead-font-size);
        }
    }

    @each $size, $map in $o-wevent-event-title-sizes-variants {
        .o_record_cover_font_#{$size} .o_wevent_event_title {
            .o_wevent_event_name {
                @include font-size(map-get($map, title));
            }
            .o_wevent_event_subtitle {
                @include font-size(map-get($map, subtitle));
            }
        }
    }

    .o_wevent_registration_btn {
        flex: 0 0 100%;

        &.collapsed {
            flex: 0 0 33%;

            .close {
                display: none;
            }
        }
        .close {
            display: block;
        }
        &:not(.collapsed) {
            box-shadow: none;
            font-weight: $font-weight-bold;
            text-transform: uppercase;
            transition: none;
        }
    }

    .o_wevent_sidebar_title {
        margin-bottom: $spacer;
        opacity: .5;
        text-transform: uppercase;
    }

    .o_wevent_sidebar_block {
        padding: $spacer * 3;
        border-bottom: $border-width solid $border-color;

        &:last-child {
            border-bottom: 0;
        }
    }
}

.o_wevent_event {
    .o_record_cover_container {
        overflow: hidden;
        z-index: 0;

        .o_record_cover_component {
            display: none;
        }
        &.o_record_has_cover {
            .o_record_cover_image {
                background-attachment: fixed;

                &::after {
                    content: "";
                    display: block;
                    @include o-position-absolute(0,0,50%,0);
                }
            }
            .o_record_cover_component {
                display: block;
                z-index: -1;
            }
            .o_wevent_event_title {
                color: white;
            }
            &.cover_full {
                min-height: 600px;
                min-height: 100vh;
            }
            &.cover_mid {
                min-height: 400px;
                min-height: 55vh;
            }
        }
    }
}
